<template>
  <div id="addFilm">
    <h3>新增电影</h3>
    <div class="form">
      <!-- 电影封面 -->
      <div class="tablecover">
        <span>电影封面</span>
        <div class="coverinner">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8888/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="film.cover" :src="film.cover" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>只能上传jpg文件,且不超过50mb</span>
        </div>
      </div>
      <!-- 电影名称 -->
      <div class="tablefilmName">
        <span>电影名称</span>
        <el-input v-model="film.name" placeholder="请输入内容"></el-input>
      </div>
      <!-- 上映地区 -->
      <div class="tableregion">
        <span>上映地区</span>
        <el-select v-model="film.region" placeholder="请选择">
          <el-option
            v-for="item in regions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 全片时长 -->
      <div class="tableduration">
        <span>全片时长</span>
        <el-input-number
          v-model="film.duration"
          :min="1"
          :max="300"
        ></el-input-number>
      </div>
      <!-- 上映时间 -->
      <div class="tableReleaseTime">
        <span>上映时间</span>
        <el-date-picker
          v-model="film.releaseTime"
          type="date"
          placeholder="选择日期"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <!-- 是否上架 -->
      <div class="tableisListed">
        <span>是否上架</span>
        <el-switch
          v-model="film.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </div>
      <!-- 电影类型 -->
      <div class="tabletype">
        <span>电影类型</span>
        <el-select v-model="film.type" placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 内容简介 -->
      <div class="tableintroduction">
        <span>内容简介</span>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="film.introduction"
          resize="none"
        >
        </el-input>
      </div>

      <!-- 底部按钮 -->
      <div class="Btnbottom">
        <el-button @click="revise = false">取 消</el-button>
        <el-button type="primary" @click="addfilm">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addFilm } from "@/api/admin.js";
export default {
  name: "addFilm",
  data() {
    return {
      film: {
        id: "",
        cover: "",
        name: "",
        region: "",
        duration: 120,
        releaseTime: "",
        status: true,
        type: "",
        introduction: "",
        hot: 0,
      },
      regions: [
        {
          value: "内地",
          label: "内地",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "美国",
          label: "美国",
        },
        {
          value: "韩国",
          label: "韩国",
        },
        {
          value: "日本",
          label: "日本",
        },
        {
          value: "泰国",
          label: "泰国",
        },
        {
          value: "印度",
          label: "印度",
        },
        {
          value: "法国",
          label: "法国",
        },
        {
          value: "英国",
          label: "英国",
        },
        {
          value: "德国",
          label: "德国",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      types: [
        {
          value: "家庭",
          label: "家庭",
        },
        {
          value: "惊悚",
          label: "惊悚",
        },
        {
          value: "科幻",
          label: "科幻",
        },
        {
          value: "爱情",
          label: "爱情",
        },
        {
          value: "动作",
          label: "动作",
        },
        {
          value: "喜剧",
          label: "喜剧",
        },
        {
          value: "恐怖",
          label: "恐怖",
        },
        {
          value: "悬疑",
          label: "悬疑",
        },
        {
          value: "犯罪",
          label: "犯罪",
        },
        {
          value: "冒险",
          label: "冒险",
        },
        {
          value: "战争",
          label: "战争",
        },
        {
          value: "历史",
          label: "历史",
        },
        {
          value: "武侠",
          label: "武侠",
        },
        {
          value: "传记",
          label: "传记",
        },
        {
          value: "古装",
          label: "古装",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
    };
  },
  methods: {
    // 图片上传成功的生命周期
    handleAvatarSuccess(res) {
      this.film.cover = res.data;
    },
    // 图片上传前的生命周期
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 50MB!");
      }
      return isJPG && isLt2M;
    },
    addfilm: function () {
      let sta = this.film.status ? 1 : 0;
      addFilm(
        this.film.name,
        this.film.releaseTime,
        this.film.type,
        sta,
        this.film.region,
        this.film.introduction,
        this.film.hot,
        this.film.cover,
        this.film.duration
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#addFilm {
  height: 770px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  h3 {
    display: block;
    margin-left: 30px;
    color: #7f7f7f;
  }
  .form {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    margin-top: 20px;
    span {
      color: #555555;
      font-size: 14px;
    }
    // 封面
    .tablecover {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      .coverinner {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        .avatar-uploader .el-upload {
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          border: 1px dashed #d9d9d9;
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          display: block;
        }
      }
    }
    // 电影名称
    .tablefilmName {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .el-input {
        width: 496px;
        margin-left: 20px;
      }
    }
    // 上映地区
    .tableregion {
      margin-bottom: 10px;
      .el-select {
        margin-left: 20px;
      }
    }
    // 全片时长
    .tableduration {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .el-input-number {
        margin-left: 20px;
      }
    }
    // 上映时间
    .tableReleaseTime {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        margin-right: 20px;
      }
    }
    // 是否上架
    .tableisListed {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-switch {
        margin-left: 20px;
      }
    }
    .tabletype {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .el-select {
        margin-left: 20px;
      }
    }
    .tableintroduction {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      .el-textarea {
        width: 494px;
        margin-left: 20px;
      }
    }
    .Btnbottom {
      margin-top: 30px;
      margin-right: 370px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }
}
</style>